<script setup lang="ts">

import { useAuthStore } from '/@/store/modules/auth.ts'

const userStore = useAuthStore()
const { avatar, username } = storeToRefs(userStore)
const handleTips = () => {
  const hour = new Date().getHours()
  return hour < 8
    ? `早上好 ${username.value}，又是元气满满的一天。`
    : hour <= 11
      ? `上午好 ${username.value}，看到您我好开心。`
      : hour <= 13
        ? `中午好 ${username.value}，忙碌了一上午，记得吃午饭哦。`
        : hour < 18
          ? `下午好 ${username.value}，您一定有些累了，喝杯咖啡提提神。`
          : `晚上好 ${username.value}，愿您天黑有灯，下雨有伞。`
}
const description = ref<string>('今日多云转晴，20℃ - 25℃!')

const statisticData = computed<any[]>(() => [
  {
    id: 0,
    label: '项目数',
    value: 25
  },
  {
    id: 1,
    label: '代办',
    value: 16
  },
  {
    id: 2,
    label: '消息',
    value: 12
  }
])
</script>

<template>

  <el-card class="page-header">
    <div class="flex-justify-between">
      <el-avatar class="page-header-avatar hidden-xs-only" :src="avatar" />
      <div class="page-header-tip">
        <div class="page-header-tip-title">
          {{ handleTips() }}
        </div>
        <div class="page-header-tip-description">
          {{ description }}
        </div>
      </div>
    </div>
    <el-space size="large">
      <el-statistic v-for="item in statisticData"
                    :title="item.label"
                    :value="item.value"
                    class="statistic"
      ></el-statistic>
    </el-space>
  </el-card>

</template>

<style scoped lang="scss">

.page-header {
  :deep() {
    .el-card__body {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      min-height: 120px;
    }
  }

  &-avatar {
    width: 80px;
    height: 80px;
    padding: var(--el-padding);
    margin-right: var(--el-margin);
    border-radius: 50%;
  }

  &-tip {
    flex: auto;
    //width: calc(100% - 200px);
    min-width: 300px;

    &-title {
      font-size: var(--el-font-size-bigger);
      font-weight: bold;
      line-height: 30px;
    }

    &-description {
      min-height: 25px;
      line-height: 25px;
    }
  }

  .statistic {
    text-align: center;
    width: 80px;
  }

  :deep() {
    .el-statistic__head {
      font-weight: bold;
      font-size: 18px;
    }
  }


}

</style>
